<template>
  <div>
    <div class="toolbar-row">
      <el-form inline v-model="queryParam" label-width="80">
        <el-form-item label="选择年份">
          <el-date-picker style="width: 120px" size="mini" type="year" v-model="queryParam.year" value-format="yyyy"/>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" size="mini" @click="loadData">查询</el-button>
        </el-form-item>


      </el-form>
    </div>
    <div class="split-line-v"></div>
    <div class="table-container">
      <el-table
        ref="monthRecTable"
        :data="recList"
        tooltip-effect="dark"
        style="width: 100%"
        stripe
        border>
        <el-table-column
          type="index"
          label="序号"
          width="80"/>
        <el-table-column
          prop="setlMon"
          label="对账月份"
          width="180"/>
        <el-table-column
          prop="psnTime"
          label="结算人次"
          width="160"/>
        <el-table-column
          prop="psnCnt"
          label="结算人数"
          width="160"/>
        <el-table-column
          prop="medfeeSumamt"
          label="医疗费总额"/>
        <el-table-column
          prop="fundPaySumamt"
          label="基金支付总金额"/>
        <el-table-column
          prop="updatetime"
          label="对账时间"
          width="200"/>
        <el-table-column
          label="对账状态"
          width="120">
          <template v-slot="scope">
            <div :class="scope.row.stmtStatus==='0'?'':scope.row.stmtStatus==='1'?'green':'red'">
              {{ scope.row.stmtStatus === '0' ? '未对账' : scope.row.stmtStatus === '1' ? '对账成功' : '对账失败' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="申报状态"
          width="120">
          <template v-slot="scope">
            <div :class="scope.row.dclaStas==='0'?'red':scope.row.dclaStas==='1'?'green':''">
              {{ scope.row.dclaStas === '0' ? '未申报' : scope.row.dclaStas === '1' ? '已申报' : '' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="240"
          label="操作">
          <template v-slot="scope">
            <el-button type="magicGreen" size="mini" v-if="scope.row.stmtStatus==='0'" @click="doMonRec(scope.row)">
              对账
            </el-button>
            <el-button type="primary" size="mini" v-else
                       @click="viewMonRec(scope.row)">查看</el-button>
            <span v-if="scope.row.stmtStatus==='1' && scope.row.dclaStas==='0'">
              <el-button type="primary" size="mini"
                         @click="doDeclare(scope.row)">申报</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="hidden-div">
      <el-dialog
        title="对账进度信息"
        :visible.sync="stepDlgVisible"
        :close-on-click-modal="false"
        @closed="loadData()"
        width="42%">
        <div>
          <el-steps :active="activeStep"
                    finish-status="success"
                    simple style="margin: 30px">
            <el-step title="生成数据"></el-step>
            <el-step title="上传确认"></el-step>
            <el-step title="执行对账"></el-step>
          </el-steps>
        </div>
      </el-dialog>
    </div>
  </div>

</template>
<!--  平台对账页面，月度列表页面 -->
<script>
  import {listRecMonthByYear, executeRecMonth} from "../../../api/rec/monthRec";
  import {doDeclare} from "../../../api/rec/declare";
  import {dateFormat,getLastMonthDay} from "@/utils/utils";
  import { mapGetters } from 'vuex'
  export default {
    name: 'PlatMonRec',
    data() {
      return {
        recList: [],
        queryParam: {
          year: dateFormat(getLastMonthDay(), 'yyyy')
        },
        stepDlgVisible: false,
        activeStep: 0
      }
    },
    computed: {
      ...mapGetters([
        'wsMsg',
        'recDVo'
      ])
    },
    watch: {
      //监测onMsg
      wsMsg: {
        handler(newVal,oldVal) {
          console.log("wsMsg:",this.wsMsg);
          console.log("newVal:",newVal);
          // 处理接收到的websocket消息
          let msgObj = newVal;
          console.log('msgObj:', msgObj);
          //如果是处理消息操作 且 页面打开更新进度
          if(msgObj.code==='process_msg' && this.stepDlgVisible){
            // 对账状态
            let state = parseInt(msgObj.object);
            console.log("state:",state);
            if(state===0||state===1){
              this.activeStep = 1;
            }else if(state===2||state===3){
              this.activeStep = 2;
            }else if(state===4||state===5){
              this.activeStep = 3;
            }
          }
        },
        deep: true
      }
    },
    created() {
      this.loadData();
      console.log("getLastMonthDay:"+getLastMonthDay())


    },
    methods: {

      async loadData() {
        let tmpParam = {...this.queryParam};
        let listPageRes = await listRecMonthByYear(tmpParam);
        if (listPageRes.code === 0) {
          this.recList = listPageRes.data;
        } else {
          this.$message.error("加载失败,msg:" + listPageRes.msg);
        }
      },
      doMonRec(row) {
        // 月对账操作
        this.activeStep = 0;
        this.stepDlgVisible = true;
        console.log("row:",row)
        executeRecMonth(row).then(res=>{
          console.log('res:'+JSON.stringify(res));
          this.$message.success("对账已处理，请查看月度明细获取对账结果");
        })
      },
      async doDeclare(row) {
        // 医保结算申报
        let declareRes = await doDeclare(row)
        if(declareRes){
          this.$message.success("已处理申报请求，请查看申报结果");
          this.loadData();
        }
      },
      async viewMonRec(row) {
        let param = {
          stmtMonId: row.stmtMonId,
          setlMon: row.setlMon,
          fixmedinsId: row.fixmedinsId,
          fixmedinsCode: row.fixmedinsCode,
          fixmedinsName: row.fixmedinsName
        };
        // commit直接同步调用
        this.$store.commit("stmt/SET_RECDVO",param);
        this.$router.push({path: '/rec/plat/MonRecView'})
      }
    }
  }
</script>

<style scoped>
  .toolbar-row {
    padding: 10px 5px;
    width: 100%;
    text-align: right;
  }

  .right {
  }

  .split-line-v {
    width: 105%;
    height: 1px;
    background: #4f4e4e;
    opacity: 0.5;
    margin: -30px 0 4px 0;
  }

  .table-container {
    padding: 0 8px;
  }
</style>
